<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="40%"
  >
    <div class="data-form-wrap">
      <el-form
        ref="dataForm"
        class="dataForm"
        :model="forms"
        :rules="tableRules"
        label-width="120px">
        <el-form-item label="上级资源" prop="parentId">
          <Treeselect
            v-model="forms.parentId"
            placeholder="请选择上级资源"
            no-results-text="暂无结果"
            clearable
            @select="select"
            :disabled="disabledStr === 'update' || disabledStr === 'addNext'"
            :options="deptOptionsData"
            :normalizer="normalizer"></Treeselect>
        </el-form-item>
        <el-form-item label="资源名称" prop="resName">
          <el-input v-model.trim="forms.resName" placeholder="请输入资源名称" />
        </el-form-item>
        <el-form-item label="资源类型" prop="resType">
          <el-radio-group v-model="forms.resType">
            <el-radio :label="1" :disabled="( disabledStr === 'addNext' && parentType !== 1) || parentType !== 1 ||disabledStr === 'update'">目录</el-radio>
            <el-radio :label="2" :disabled="( disabledStr === 'addNext' && parentType !== 1) || parentType !== 1 ||disabledStr === 'update'">菜单</el-radio>
            <el-radio :label="3" :disabled="( disabledStr === 'addNext' && parentType == 1) || parentType === 1 ||disabledStr === 'update'" >按钮</el-radio>
            <el-radio :label="4" :disabled="( disabledStr === 'addNext' && parentType !== 1) || parentType !== 1 ||disabledStr === 'update'">外链</el-radio>
            <el-radio :label="5" :disabled="( disabledStr === 'addNext' && parentType !== 1) || parentType !== 1 ||disabledStr === 'update'">iFrame</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="资源图标" prop="resIcon">
          <el-popover placement="bottom-start" width="480" trigger="click" @show="$refs['iconSelect'].reset()">
            <IconSelect ref="iconSelect" @selected="selected" />
            <el-input slot="reference" v-model="forms.resIcon" placeholder="点击选择图标" readonly>
              <svg-icon
                v-if="forms.resIcon"
                slot="prefix"
                :icon-class="forms.resIcon"
                class="el-input__icon"
                style="height: 32px; width: 18px; vertical-align: middle"
              />
              <i v-else slot="prefix" class="el-icon-search el-input__icon"></i>
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="资源地址" prop="resUrl" v-if="forms.resType !== 3 && forms.resType !== 1">
          <!-- <span slot="label">
              <el-tooltip content="地址栏中的路由地址" placement="top"> <i class="el-icon-question"></i> </el-tooltip>路由
            </span> -->
          <el-input v-model.trim="forms.resUrl" placeholder="请输入资源地址" />
        </el-form-item>
        <el-form-item label="按钮key" prop="buttonKey" v-if="forms.resType === 3">
          <el-input v-model.trim="forms.buttonKey" placeholder="请输入按钮key" />
        </el-form-item>
        <el-form-item label="所属系统" :prop="forms.resType === 4 ? '' : 'systemId'" v-if="forms.resType === 2 || forms.resType === 4 || forms.resType === 5">
          <el-select v-model="forms.systemId" clearable placeholder="请选择所属系统" style="width:100%;">
            <el-option
              v-for="item in allServiceList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序 " prop="sortNum">
          <el-input type="number" @input="validateInput" v-model.trim="forms.sortNum" />
        </el-form-item>
        <el-form-item label="是否显示" prop="ifShow">
          <el-radio-group v-model="forms.ifShow">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { addOrUpd, getParentList, getAllService } from '@/api/resourceManage'
import IconSelect from '@/components/IconSelect'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Edit',
  components: {
    IconSelect,
    Treeselect
  },
  props: {
    tableList: {
      type: Array,
      require: true,
      default: () => []
    }
  },
  data () {
    return {
      rules: {},
      title: '',
      dialogVisible: false,
      deptOptionsData: [],
      forms: {
        resName: '',
        resType: 1,
        resIcon: '',
        ifShow: true,
        parentId: 0,
        sortNum: 1,
        systemId: ''
      },
      parentType: 1,
      disabledStr: '',
      allServiceList: [],
      tableRules: {
        resName: [
          { required: true, message: '资源名称不能为空', trigger: 'blur' },
          { max: 20, message: '不能超过20个字符', trigger: 'blur' }
        ],
        resType: [
          { required: true, message: '资源类型不能为空', trigger: 'change' }
        ],
        resIcon: [
          { required: true, message: '资源图标不能为空', trigger: 'blur' }
        ],
        resUrl: [
          { required: true, message: '资源地址不能为空', trigger: 'blur' },
          { max: 50, message: '不能超过50个字符', trigger: 'blur' }
        ],
        systemId: [
          { required: true, message: '所属系统不能为空', trigger: 'change' }
        ],
        ifShow: [
          { required: true, message: '是否选择不能为空', trigger: 'change' }
        ],
        buttonKey: [{ required: true, message: '按钮key不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
     validateInput () {
      this.forms.sortNum = this.forms.sortNum.replace(/[^\d]/g, '') // 使用正则表达式去除非数字字符
      if (this.forms.sortNum === '' || this.forms.sortNum === '0') {
        this.forms.sortNum = '1' // 默认设置为1或任何你认为合适的默认正整数
      } else if (this.forms.sortNum > 99999) {
        this.forms.sortNum = 99999
      }
    },
    select (node) {
      console.log(node)
      this.parentType = node.resType
      this.forms.resType = node.resType === 1 ? 1 : 3
    },
    open (str, row) {
      console.log(row, '')
      this.disabledStr = str
      this.getParentListData()
      this.getAllServiceData()
      this.dialogVisible = true
      if (str !== 'update') {
        this.title = '新增资源'
        this.forms = {
          resName: '',
          resType: 1,
          resIcon: '',
          ifShow: true,
          sortNum: 1,
          parentId: 0,
          systemId: ''
        }
        this.parentType = 1
      } else {
        this.title = '修改资源'
        this.forms = JSON.parse(JSON.stringify(row))
      }
      if (str === 'addNext') {
        this.forms.parentId = JSON.parse(JSON.stringify(row)).id
        this.parentType = row.resType
      this.forms.resType = row.resType === 1 ? 1 : 3
      }
    },
   async getAllServiceData () {
     const res = await getAllService()
     this.allServiceList = res.data
    },
   async getParentListData (str) {
     const res = await getParentList()
     this.deptOptionsData = [{ id: 0, resName: '根目录', resType: 1, subRes: res.data || [] }]
    },
     // 选择图标
    selected (name) {
      this.forms.resIcon = name
      this.$refs.dataForm.clearValidate('resIcon')
    },
    async submitHandle () {
      console.log(this.forms, '提交参数')
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          const res = await addOrUpd(this.forms)
          if (res.code === 'success') {
            this.$message.success('操作成功')
            this.dialogVisible = false
            this.$emit('getTableList')
          } else {
            this.$message.error(res.msg)
         }
        }
      })
    },
    normalizer (node) {
      if (!node.subRes) {
        delete node.subRes
      }
      return {
        id: node.id,
        label: node.resName,
        children: node.subRes
      }
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .vue-treeselect__label{
  font-size: 14px !important;
  color: #606266;
  font-weight: normal !important;
}
</style>
